<script setup lang="ts">
import { ref } from 'vue'
import * as ElIcons from '@element-plus/icons'
import { Ref } from '@vue/reactivity'

interface DialogVisibleType {
    dialogVisible: boolean
}

interface PropsType {
    dialog: DialogVisibleType
}

const iconName: Ref<string> = ref('')
const tempIcons = ref([])
Object.keys(ElIcons).forEach((e) => {
    // @ts-ignore
    tempIcons.value.push(ElIcons[e])
})

// eslint-disable-next-line no-undef
defineProps<PropsType>()

// eslint-disable-next-line no-undef
const emit = defineEmits(['selectIcon'])

// 选择一个图标后
const selectIcon = (name: string): void => {
    emit('selectIcon', name)
}

// 搜索图标
const searchIcons = (): void => {
    if (iconName.value) {
        tempIcons.value.length = 0
        Object.keys(ElIcons).forEach((e) => {
            if (e.toLowerCase().includes(iconName.value.toLowerCase())) {
                // @ts-ignore
                tempIcons.value.push(ElIcons[e])
            }
        })
    }
}
/* eslint-disable */
// 实在改不动了，先禁用吧
</script>

<template>
    <el-dialog v-model="dialog.dialogVisible" title="Icons" width="60%" top="8vh" destroy-on-close center append-to-body>
        <div class="search-block">
            <el-input v-model="iconName" placeholder="请输入图标名" @input="searchIcons" />
            <el-button plain @click="selectIcon('')" style="margin-left: 10px">清除现有图标</el-button>
        </div>
        <el-scrollbar style="width: 100%" height="60vh">
            <div class="icons-container">
                <div class="icon-item" v-for="icon in tempIcons" :key="icon.name" @click="selectIcon(icon.name)">
                    <el-icon :size="32">
                        <component :is="icon.name" />
                    </el-icon>
                    <br />
                    <span class="text-title">
                        {{ icon.name }}
                    </span>
                </div>
            </div>
        </el-scrollbar>
    </el-dialog>
</template>

<style scoped>
.search-block {
    width: 98.6%;
    display: flex;
    margin-bottom: 15px;
}
.icons-container {
    display: flex;
    flex-wrap: wrap;
}
.text-title {
    max-width: 86px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.icon-item {
    width: 86px;
    height: 86px;
    padding: 20px;
    display: flex;
    cursor: pointer;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--el-border-color-base);
}
.icon-item:hover {
    color: var(--el-color-primary);
    border: 1px solid var(--el-color-primary);
}
</style>
